<template>
  <view>
    <view>scroll-view纵向滚动</view>
    <scroll-view class="scroll-y" scroll-y="true">
      <view class="bg-blue item">A</view>
      <view class="bg-green item">B</view>
      <view class="bg-red item">C</view>
    </scroll-view>
    <view>scroll-view横向滚动</view>
    <scroll-view class="scroll-x" scroll-x="true">
      <view class="bg-blue item2">Aaaaa</view>
      <view class="bg-green item2">B</view>
      <view class="bg-red item2">C</view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 这里可以添加数据，目前示例中无需要返回的数据
    };
  },
  // 可根据需要添加其他生命周期钩子或方法
};
</script>

<style>
  .item {
    height: 200upx;
  }
  .item2 {
    height: 200upx;
    display: inline-block; /* 子内容显示在一行 */
    width: 100%;
  }
  .bg-blue {
    background-color: #007aFF;
  }
  .bg-green {
    background-color: #4CD964;
  }
  .bg-red {
    background-color: #AA0000;
  }
  .scroll-y {
    height: 200upx;
  }
  .scroll-x {
    white-space: nowrap; /* 该滚动区域的子内容显示在一行 */
  }
</style>